<template>
	<div class="kouJibm">
		<el-tabs v-model="activeName" class="demo-tabs">
			<el-tab-pane label="应用开发前期" name="1">
				<el-form ref="ruleFormRef" :model="ruleForm" label-width="auto" :rules="rules" class="demo-ruleForm" status-icon>
					<div class="content_box" v-for="(item, index) in ruleForm.implementationList" :key="index">
						<HyCard :title="`分包${index + 1}实施单位信息`">
							<template #topRight>
								<el-button style="background-color: #2f99d4; color: #ffffff" @click="delForm(index)"
									><el-icon class="el-icon--left"><Delete /></el-icon>移除</el-button
								>
							</template>
							<!-- 表单项目 -->
							<div class="form_box">
								<el-form-item class="item" label="数据来源:" :prop="`implementationList[${index}][dataSource]`" :rules="rules.dataSource">
									<!-- <el-input v-model="item.dataSource" placeholder="请输入" /> -->
									<div>{{ item.dataSource }}</div>
								</el-form-item>
								<el-form-item class="item" label="统一社会信用代码:" :prop="`implementationList[${index}][code]`" :rules="rules.code">
									<el-input v-model="item.code" placeholder="请输入" />
								</el-form-item>
								<el-form-item class="item" label="单位名称:" :prop="`implementationList[${index}][unitName]`" :rules="rules.unitName">
									<el-input v-model="item.unitName" placeholder="请输入" />
								</el-form-item>
								<el-form-item
									class="item"
									label="注册地址:"
									:prop="`implementationList[${index}][registeredAddress]`"
									:rules="rules.registeredAddress"
								>
									<el-input v-model="item.registeredAddress" placeholder="请输入" />
								</el-form-item>
								<el-form-item class="item" label="单位联系人:" :prop="`implementationList[${index}][contactPerson]`" :rules="rules.contactPerson">
									<el-input v-model="item.contactPerson" placeholder="请输入" />
								</el-form-item>
								<el-form-item
									class="item"
									label="联系人电话:"
									:prop="`implementationList[${index}][contactPhoneNumber]`"
									:rules="rules.contactPhoneNumber"
								>
									<el-input v-model="item.contactPhoneNumber" placeholder="请输入" />
								</el-form-item>
								<el-form-item class="item" label="企业类型:" :prop="`implementationList[${index}][enterpriseType]`" :rules="rules.enterpriseType">
									<el-select v-model="item.enterpriseType" placeholder="请输入">
										<el-option v-for="(item, index) in dictionary.enterpriseTypes()" :key="index" :label="item.label" :value="item.value" />
									</el-select>
								</el-form-item>
								<el-form-item class="item" label="企业规模:" :prop="`implementationList[${index}][enterpriseScale]`" :rules="rules.enterpriseScale">
									<el-select v-model="item.enterpriseScale" placeholder="请输入">
										<el-option v-for="(item, index) in dictionary.enterpriseScales()" :key="index" :label="item.label" :value="item.value" />
									</el-select>
								</el-form-item>
								<el-form-item
									class="item"
									label="是否为本地企业:"
									:prop="`implementationList[${index}][localEnterprise]`"
									:rules="rules.localEnterprise"
								>
									<el-select v-model="item.localEnterprise" placeholder="请输入">
										<el-option v-for="(item, index) in dictionary.localEnterprise()" :key="index" :label="item.label" :value="item.value" />
									</el-select>
								</el-form-item>
								<el-form-item
									v-if="ruleForm.implementationList[index].localEnterprise == '1'"
									class="item"
									label="纳税地区:"
									:prop="`implementationList[${index}][taxRegion]`"
									:rules="rules.taxRegion"
								>
									<!-- <el-input v-model="item.taxRegion" placeholder="请输入" /> -->
									<el-select v-model="item.taxRegion" placeholder="请输入">
										<el-option v-for="(item, index) in areaList" :key="index" :label="item.label" :value="item.value" />
									</el-select>
								</el-form-item>
								<el-form-item class="item" label="采购项目号:" :prop="`implementationList[${index}][projectNumber]`" :rules="rules.projectNumber">
									<el-input v-model="item.projectNumber" placeholder="请输入" />
								</el-form-item>
								<el-form-item
									class="item"
									label="采购方式:"
									:prop="`implementationList[${index}][procurementMethod]`"
									:rules="rules.procurementMethod"
								>
									<el-select v-model="item.procurementMethod" placeholder="请输入">
										<el-option v-for="(item, index) in dictionary.procurementMethod()" :key="index" :label="item.label" :value="item.value" />
									</el-select>
								</el-form-item>
								<el-form-item
									class="item"
									label="中标金额:"
									:prop="`implementationList[${index}][amount]`"
									:rules="[
										{
											required: true,
											pattern: /^(0|[1-9]\d{0,5})(\.(?!(0$|.*0$)\d*)\d{1,6})?$/,
											message: '请输入正确的金额',
										},
									]"
								>
									<el-input v-model="item.amount" placeholder="请输入">
										<template #append>万</template>
									</el-input>
								</el-form-item>
							</div>
						</HyCard>
					</div>
					<div class="addForm">
						<div class="add" @click="formAdd">+</div>
					</div>
					<div class="file">
						<HyCard title="项目资料">
							<div class="unit">
								<el-form-item class="item" label="资金预算批复文件:" prop="fundBudgetApproval">
									<TsyUploadFile
										type="submit"
										:fileType="['.rar', '.zip', '.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png']"
										:fileSize="200"
										v-model="ruleForm.fundBudgetApproval"
									/>
								</el-form-item>
								<el-form-item class="item" label="应用管理制度:" prop="applicationManagementSystem">
									<TsyUploadFile
										type="submit"
										:fileType="['.rar', '.zip', '.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png']"
										:fileSize="200"
										v-model="ruleForm.applicationManagementSystem"
									/>
								</el-form-item>
								<el-form-item class="item" label="其他补充材料:" prop="otherSupplementaryMaterials">
									<TsyUploadFile
										type="submit"
										:fileType="['.rar', '.zip', '.doc', '.docx', '.pdf', '.jpg', '.jpeg', '.png']"
										:fileSize="200"
										v-model="ruleForm.otherSupplementaryMaterials"
									/>
								</el-form-item>
							</div>
						</HyCard>
					</div>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<div class="bott_box">
			<el-button plain class="wihte-button" @click="save(ruleFormRef)">保存</el-button>
			<el-button plain class="blue-button" @click="shenBao(ruleFormRef)">申报</el-button>
		</div>

		<!-- submitPass 为审核成功后的回调函数 -->
		<Start ref="startRef" @submitPass="handleBack"></Start>
	</div>
</template>

<script lang="ts" setup>
import dictionary from './dictionary.js';
import { appImplementationSubmit, appImplementationSave, getImplementationByCode, treeAndSelf } from '/@/api/Implementation/addImple';
import HyCard from '/@/views/digitalList/detail/components/Card.vue';
import TsyUploadFile from '/@/components/HyUpload/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// //申报组件
import Start from '@cqdcg/admin/views/flow/form/tools/startFlow';
import { useDict } from '/@/hooks/dict';
const { get_area } = useDict('get_area'); //是否字典
import { toRefs, defineProps, ref, onMounted, nextTick, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import mittBus from '/@/utils/mitt';
const route = useRoute();
const router = useRouter();
const handleBack = () => {
	mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
	router.push({
		path: '/digitalImplement/digitalImpDec/index',
	});
};
onMounted(() => {
	setTimeout(() => {
		getArea();
	}, 500);
});
const props = defineProps({
	info: {
		type: Object,
	},
	message: {
		type: String,
	},
	tableType: {
		type: String,
	},
	id: {
		type: String,
		default: '',
	},
	declareId: {
		type: String,
	},
});
watch(
	() => props.info,
	(data) => {
		ruleForm.value = { ...data };
	}
);
// 验证手机的规则
let checkPhone = (rule: any, value: any, callback: any) => {
	// 手机号正则表达式
	const regMobile = /^1[3456789]\d{9}$/;
	if (regMobile.test(value)) {
		// 合法的手机号
		return callback();
	}
	callback(new Error('请输入正确的手机号'));
};
//统一社会信用代码
let checkCode = (rule: any, value: any, callback: any) => {
	// 统一社会信用代码正则表达式
	const regMobile = /[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}/;
	if (regMobile.test(value)) {
		// 统一社会信用代码
		return callback();
	}
	callback(new Error('请输入正确的统一社会信用代码'));
};

const activeName = ref('1');
const ruleFormRef = ref();
const rules = reactive({
	dataSource: [{ required: true, message: '请输入', trigger: 'blur' }],
	code: [
		{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
		{ max: 18, min: 18, message: '请输入正确的统一社会信用代码', trigger: 'blur' },
		// { validator: checkCode, trigger: 'blur' },
	],
	unitName: [
		{ required: true, message: '请输入单位名称', trigger: 'blur' },
		{ max: 50, message: '输入最大长度为50', trigger: 'blur' },
	],
	registeredAddress: [
		{ required: true, message: '请输入注册地址', trigger: 'blur' },
		{ max: 50, message: '输入最大长度为50', trigger: 'blur' },
	],
	contactPerson: [
		{ required: true, message: '请输入单位联系人', trigger: 'blur' },
		{ max: 20, message: '输入最大长度为20', trigger: 'blur' },
	],
	contactPhoneNumber: [
		{ required: true, message: '请输入联系人电话', trigger: 'blur' },
		{ validator: checkPhone, trigger: 'blur' },
	],
	enterpriseType: [{ required: true, message: '请选择企业类型', trigger: 'change' }],
	enterpriseScale: [{ required: true, message: '请选择企业规模', trigger: 'change' }],
	localEnterprise: [{ required: true, message: '请选择是否为本地企业', trigger: 'change' }],
	taxRegion: [{ required: true, message: '请选择纳税地区', trigger: 'change' }],
	projectNumber: [
		{ required: true, message: '请输入采购项目号', trigger: 'blur' },
		{ max: 50, message: '输入最大长度为50', trigger: 'blur' },
	],
	procurementMethod: [{ required: true, message: '请选择采购方式', trigger: 'change' }],
	amount: [
		{ required: true, message: '请输入中标金额', trigger: 'blur' },
		{ type: 'number', message: '请输入数字', trigger: 'blur' },
	],
	fundBudgetApproval: [{ required: true, message: '请上传文件', trigger: 'blur' }],
	applicationManagementSystem: [{ required: true, message: '请上传文件', trigger: 'blur' }],
	otherSupplementaryMaterials: [{ required: true, message: '请上传文件', trigger: 'blur' }],
});
const ruleForm: any = ref({
	id: '',
	appCode: '',
	type: '',
	implementationList: [
		{
			dataSource: '责任部门填写',
			code: '',
			unitName: '',
			registeredAddress: '',
			contactPerson: '',
			contactPhoneNumber: '',
			enterpriseType: '',
			enterpriseScale: '',
			localEnterprise: '',
			taxRegion: '',
			projectNumber: '',
			procurementMethod: '',
			amount: '',
		},
	],
	fundBudgetApproval: '',
	applicationManagementSystem: '',
	otherSupplementaryMaterials: '',
});
//添加表单
const formAdd = () => {
	let appCode: any = message;
	ruleForm.value.implementationList.push({
		// appCode: appCode,
		dataSource: '责任部门填写',
		code: '',
		unitName: '',
		registeredAddress: '',
		contactPerson: '',
		contactPhoneNumber: '',
		enterpriseType: '',
		enterpriseScale: '',
		localEnterprise: '',
		taxRegion: '',
		projectNumber: '',
		procurementMethod: '',
		amount: '',
	});
};
//删除表单
const delForm = (indexs: any) => {
	ruleForm.value.implementationList.splice(indexs, 1);
};

//获取区县菜单
const areaList: any = ref([]);
const getArea = () => {
	let zhi = get_area?.value[0]?.value;
	let data = { parentId: zhi };
	treeAndSelf(data).then((res) => {
		if (res.code == 0) {
			console.log(res.data[0].children);
			let arr = res.data[0].children;
			let data = arr.map((item: any) => {
				return {
					value: item.name,
					label: item.name,
				};
			});
			areaList.value = data;
		}
	});
};

//编辑时获取详情数据
const getDetail = () => {
	let ids = id;
	if (!ids) {
		return;
	}
	getImplementationByCode({ id: ids }).then((res) => {
		if (res.code == 0) {
			//判断有无数据
			if (res.data.appCode && res.data.applicationManagementSystem) {
				ruleForm.value = res.data;
			}
		}
	});
};
const businessKey = ref('');
//保存
const save = async (formEl: any) => {
	let appCode: any = message;
	let tableType: any = props.tableType;
	// ruleForm.value.appCode = appCode;
	ruleForm.value.type = tableType;
	ruleForm.value.id = id.value || businessKey.value;
	ruleForm.value.declareId = declareId;
	// ruleForm.value.implementationList[0].appCode = appCode;
	let data = ruleForm.value;
	if (businessKey.value) {
		data.id = businessKey.value;
	}
	console.log(data, businessKey.value, '123123');

	if (!formEl) return;
	await formEl.validate((valid: any, fields: any) => {
		if (valid) {
			appImplementationSave(data).then((res) => {
				if (res.code == 0) {
					handleBack();
				}
			});
		} else {
			console.log('error submit!', fields);
		}
	});
};
//申报
const startRef = ref(null);

const shenBao = async (formEl: any) => {
	if (!formEl) return;
	let appCode: any = message;
	let tableType: any = props.tableType;
	// ruleForm.value.appCode = appCode;
	ruleForm.value.type = tableType;
	ruleForm.value.id = id?.value || businessKey.value;
	ruleForm.value.declareId = declareId;
	// ruleForm.value.implementationList[0].appCode = appCode;
	let data = ruleForm.value;
	await formEl.validate((valid: any, fields: any) => {
		if (valid) {
			appImplementationSubmit(data).then((res) => {
				if (res.code == 0) {
					businessKey.value = res.data.businessKey;
					let basicData = res.data;
					startRef?.value?.handle({
						flowName: basicData.flowName,
						businessKey: basicData.businessKey,
						paramMap: {},
					});
				}
			});
		} else {
			console.log('error submit!', fields);
		}
	});
};

const { message, tableType, id, declareId } = toRefs(props);
</script>

<style lang="scss" scoped>
.kouJibm {
	background-color: #ffffff;
	padding: 10px;
	.demo-tabs {
		.demo-ruleForm {
			:deep(.el-card) {
				border: none !important;
				box-shadow: none;
			}
			.content_box {
				.form_box {
					display: flex;
					flex-wrap: wrap;
					.item {
						margin-top: 10px;
						width: 31%;
						margin-bottom: 10px;
						margin-right: 5px;
					}
				}
				:deep(.el-input-number .el-input__inner) {
					text-align: left;
				}
			}

			.addForm {
				display: flex;
				justify-content: center;
				color: #2f99d4;

				.add {
					border: 1px solid black;
					width: 30px;
					// height: 30px;
					margin: auto;
					font-size: 20px;
					border-radius: 50%;
					text-align: center;
					cursor: pointer;
				}
			}
			.file {
				.unit {
					display: flex;
					flex-wrap: wrap;
					.item {
						width: 31%;
						margin-bottom: 10px;
						margin-right: 5px;
					}
				}
			}
		}
	}

	.bott_box {
		position: absolute;
		left: 0px;
		bottom: 0px;
		margin-top: 10px;
		width: 100%;
		padding: 10px 0;
		text-align: center;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
		flex-grow: 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

:deep(.el-form-item) {
	align-items: flex-start !important;
}
</style>
